<!-- 组件结构 -->
<template>
    <div>
        <img src="../assets/logo.png" alt="">
        <h1>GUGU,this is {{msg}}</h1>
        <hr />
        <h1>学生姓名：{{name}}</h1>
        <h1>学生性别：{{sex}}</h1>
        <h1>学生年龄：{{myage+1}}</h1>
        <button @click="addAge">点击此处age+1</button>
    </div>
</template>

<script>
//
    export default {
        name:'Student',
        data(){
            return{
                msg:'Welcome to the world of Vue',
                myage:this.age
            }
        },
        //接收的同时对数据进行类型限制
        props:{
            name:{type:String,required:true}, //name的类型是字符串
            sex:{type:String,default:'男'},   //sex是必要的
            age:Number
        },
        methods: {
            addAge(){
                this.myage++
            }
        },
    }
</script>

